


AO3 CSS Selector Ids and Classes

by dustnik



Category: No Fandom
Genre: CSS, CSS Classes, CSS Ids, CSS Selectors, ao3 - Freeform, workskins
Language: English
Status: Completed
Published: 2020-07-13
Updated: 2020-07-13
Packaged: 2021-03-04 02:54:58
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 493
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/24906427
Author URL: https://archiveofourown.org/users/dustnik/pseuds/dustnik
Summary: A list of all AO3's CSS Id and Class selectors to help you style your work.
Kudos: 5





	AO3 CSS Selector Ids and Classes

Last autumn, I set out to teach myself CSS from the free online tutorials at W3Schools.com (I already knew HTML). After learning the basics, I was eager to try out my new-found skills but where? Then I remembered that AO3 allows its users to style their work using an external CSS they call a "workskin." If you wish to create a workskin, the process is explained [here](https://archiveofourown.org/admin_posts/1370). I won't go over all that, as AO3 explains it much better than I ever could. Nor am I here to teach you CSS. Rather, I'm posting this in the hope of saving you some of the time and frustration I experienced.

So I created my workskin and was ready to write some CSS. I soon learned that every command must begin with the id #workskin followed by a single space. (Note: If you forget, it will be inserted automatically.) I started with a simple one.
    
    
       
        #workskin p {  
          text-align: justify;
        }
    

This justified the text in every paragraph of my fanfiction. So far, so good, but I wanted to do more.

I also wished to make changes to the look of the background, author name, notes, and the chapter text itself, but I didn't know how to _access_ these specific sections. I searched and searched online for this information to no avail. Finally, after much trial and error, I managed to identify all the ids and classes for the area of the page that AO3 allows its users to alter. You simply have to add your selectors, if any, after them and write your declarations on the line between the curly braces (minus the green comments, of course).
    
    
        **/* user section */**
        #workskin {
          
        }
    
        **/* story title */**
        #workskin .preface.group h2.title.heading {
          
        }
    
        **/* author name */**
        #workskin .preface.group h3.byline.heading a {
          
        }
    
        **/* summary heading */**
        #workskin .preface.group .summary.module h3.heading {
          
        }
    
        **/* summary text */**
        #workskin .preface.group .summary.module .userstuff {
          
        }
    
        **/* beginning notes heading */**
        #workskin .preface.group .notes.module h3.heading {
          
        }
    
        **/* beginning notes text */**
        #workskin .preface.group .notes.module .userstuff {
          
        }
    
        **/* specific chapter (replace ? with chapter number) */**
        #workskin #chapter-?  {
          
        } 
    
        **/* chapter numbers */**
        #workskin .chapter.preface.group h3.title a {
          
        }
     
        **/* chapter text */**
        #workskin .userstuff.module {
          
        }
    
        **/* end notes heading */**
        #workskin .preface.group .end.notes.module h3.heading {
          
        }
    
        **/* end notes text */**
        #workskin .preface.group .end.notes.module .userstuff {
          
        }
    
    

For instance, in styling [_Murder at Downton Abbey_](https://archiveofourown.org/works/6479536/chapters/14832076), I wanted to create a raised colored letter in a different font to begin every chapter. I added the following command to my workskin:
    
    
        #workskin .userstuff.module > p:first-of-type::first-letter {
          color: crimson;
          font: 2.5em Georgia, serif;
        }
    

The selector begins with the requisite id #workskin (plus a single space) followed by the AO3 classes .userstuff.module which refers to the chapter text itself. I then added my selector behind it and my declarations between the curly braces and voilà!

I hope this information will help you create a unique look for your work. If you have any questions, feel free to contact me, and I'll try to help if I can.


End file.
